﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>box</title>
    <style type="text/css">
        body {
            margin: 50px;
        }

    </style>
</head>
<body>
    <div id="boxtest">
        <script type="text/html">
            {{view controller="main" app="demo" /}}
            <p style="font-weight:bold;">Tween实例效果-测试 bingoJS {{text bingo.version + ' ' + (bingo.isAFrame?"A":"T") /}} 绑定性能</p>
            <div>
                <p><strong> 场景：</strong>创建一个command box并通过Tween算法设置box.top属性检验绑定性能(检验box创建，编译，动画，删除整个过程)</p>
            </div>
            <div>
                <p><strong> 说明：</strong>dome定义了一个控制器(controller)和一个box(command)</p>
                <ul>
                    <li><strong> 控制器(controller)：</strong>主要负责box组件的创建</li>
                    <li><strong> box(command)：</strong>定义top属性与dom层top值绑定，参数Tween算法运动， 运动完后自动删除</li>
                </ul>
            </div>
            <div style="margin-bottom:10px;">
                <strong>Tween类型：</strong>
                <select model="[[tween]]">
                    <option value="Linear">Linear</option>
                    <option value="Quad">Quad</option>
                    <option value="Cubic">Cubic</option>
                    <option value="Quart">Quart</option>
                    <option value="Quint">Quint</option>
                    <option value="Sine">Sine</option>
                    <option value="Expo">Expo</option>
                    <option value="Circ">Circ</option>
                    <option value="Elastic">Elastic</option>
                    <option value="Back">Back</option>
                    <option value="Bounce">Bounce</option>
                </select>
                <strong>ease类型：</strong>
                <select model="[[ease]]">
                    {{for item in easeList}}
                    <option value="[[item]]">{{text item /}}</option>
                    {{/for}}
                </select>
                <!--<strong>运动时长：</strong>
                <select model="[[duration]]">
                    <option value="30">30</option>
                    <option value="45">45</option>
                    <option value="60">60</option>
                    <option value="75">75</option>
                </select>-->
            </div>
            <div>
                <div style="border: 1px solid #000000; width: 900px; position: relative; height: 500px;">
                    {{cp name="boxcontents" /}}
                </div>
            </div>
        </script>
    </div>

    <script src="../scripts/bingo2/bingo.js"></script>
    <script src="../scripts/other/Tween.js"></script>
    <script src="route.js"></script>
    <script type="text/javascript">

        (function (bingo) {
            bingo.ready(function () {
                //console.profile('boot');
                console.time('boot');
                bingo.compile(document.getElementById('boxtest')).then(function () {
                    //console.profileEnd('boot');
                    console.timeEnd('boot');
                });
            });

            demoApp.controller('main', function ($view) {
                window.view1 = $view;

                $view.duration = iDuration;
                $view.$observe('duration', function (c) {
                    iDuration = c.value;
                });

                $view.tween = '';
                $view.easeList = [];
                $view.ease = '';
                $view.$observe('tween', function (c) {
                    var easeList = [], tween = Tween[c.value];
                    bingo.eachProp(tween, function (item, n) {
                        easeList.push(n);
                    });
                    $view.easeList = easeList;
                    $view.ease = easeList.length > 0 ? easeList[0] : '';
                    fun = tween;
                    if (fun[$view.ease]) fun = fun[$view.ease];
                });
                $view.$observe('ease', function (c) {
                    fun = Tween[$view.tween];
                    if (fun[c.value]) fun = fun[c.value];
                });
                $view.tween = 'Expo';

                //box 容器节点
                $view.node = null;
                $view.$ready(function () {
                    var i = 0;
                    //创建box
                    var createBox = function () {
                        if (i > 30) return;
                        i++;
                        bingo.aFrame(function () { createBox(); },2);

                        $view.boxcontents.$insertAfter('{{box /}}');

                    };
                    //开始创建
                    createBox();
                });
            });


            var tick = 0, countAll = 0, countMax = 500, colors = ['#993300', 'red', 'green', 'blue', 'yellow'];
            var contentWidth = 900,
                contentHeight = 500,
                boxSize = 50, moveHeigth = contentHeight - boxSize, iDuration = 45,
                    fun = Tween['Expo']['easeIn'];


            demoApp.command('box', function (cp) {

                cp.$tmpl('{{view /}}<div style="background-color:[[backgroundColor]];width: 50px; position: absolute; height: 50px; top:[[top]]px;left:[[left]]px; "></div>');

                cp.$controller(function ($view) {

                    var _reset = function () {
                        $view.top = 0;
                        $view.left = parseInt(Math.random() * (contentWidth - boxSize));
                        $view.backgroundColor = colors[parseInt(Math.random() * 4)];
                    };
                    _reset();

                    $view.$ready(function () {

                        var t = 0, height = moveHeigth, d = iDuration, top = 0;
                        //观察top属性改变
                        $view.$layout('top', function (c) {
                            if (t < d) {
                                t++;
                                this.top = fun(t, 0, height, d);
                                //改变top值
                                if (top == this.top)
                                    this.top += .001;
                                top = this.top;
                            } else {
                                //动画结束
                                this.top = height;
                                bingo.aFrame(function () {
                                    t = 0, top = 0, d = iDuration;
                                    _reset();
                                    //删除box节点（删除box组件）
                                    //cp.$parent.$remove();
                                }, 1);
                            }
                        }.bind($view));
                        //改变top值， 开始动画
                        t++;
                        $view.top = fun(t, 0, height, d);
                    });
                });

            });
            
        })(bingoV2);

    </script>
</body>
</html>
